<template>
	<div class="nav">
		<ul>
			<li v-for="(val,index) in navList" @click="toPage(val.url)">
				<p class="p1"><img :src='val.imageUrl'></p>
				<p>{{val.title}}</p>
			</li>
		</ul>
	</div>
</template>
<script>
	import {} from 'vux'

	export default {
		components: {

		},
		data() {
			return {
				navList: [{
						title: '首页',
						imageUrl: require("../assets/home/home.png"),
						url: '/home?show=1'
					},
					{
						title: '成长记录',
						imageUrl: require("../assets/record/record.png"),
						url: '/grow'

					},
					{
						title: '我的',
						imageUrl: require("../assets/my/my.png"),
						url: '/my'
					},
				]
			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			toPage(url) {
				console.log(url);
				this.$router.push(url);
			}
		},


	}
</script>

<style lang="less" scoped="scoped">
	.nav {
		width: 100%;
		height: 100%;

		ul {
			width: 100%;
			height: 100%;
			list-style: none;
			text-align: center;
			    box-shadow: 0px 0px 10px #d9d9d9;
			
			li {
				width: 33.33%;
				float: left;
				font-size: 14px;

				.p1 {

					margin-top: 8px;
					height: 20px;

					img {
						width: 20px;
						height: 20px;
					}
				}

			}
		}
	}
</style>
